<template>
  <section class="index">
    <div class="topTitle blue getTop">
      倾城婚恋
    </div>
    <div class="swiper-container sBanner" id="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item,index) in bannerList">
          <img v-cloak :src="item.ad_logo" />
        </div>
      </div>
      <div class="swiper-pagination swiper-pagination-banner"></div>
    </div>
    <div class="indexList">
      <div class="listTitle"><i></i>今日推荐</div>
      <div class="swiper-container-n nBanner">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="item in dataList">
            <div class="item">
              <div class="images" @click="goRouter(item.id)">
                <img v-if="item.avatar!=''" :src="item.avatar">
                <img v-else :src="$store.state.defLogo">
              </div>
              <div class="itemTop">
                <div class="txtle">
                  <p v-if="item.nickname!=''" class="name">{{item.nickname}}</p>
                  <p v-else class="name">{{item.id}}</p>
                  <p v-if="item.live_province!=null" class="add"><i></i>{{item.live_province.name}}</p>
                  <p v-else class="add"></p>
                  <p class="txt">{{item.height}}cm · {{item.weight}}kg · {{item.constellation|dayB}}座</p>
                  <p class="tip">
                    <span v-if="item.is_edu_card!=1">本科</span>
                    <span v-if="item.is_car_card!=1">有车</span>
                    <span v-if="item.is_house_card!=1">有房</span>
                    <span v-if="item.is_job_card!=1">主管</span>
                  </p>
                </div>
              </div>
              <div class="itemInfo">
                <div class="click">
                  <ul>
                    <li>没眼缘</li>
                    <li v-if="item.user_follow!=null" @click="delFollow(item)" class="on"><span><i class="icon1"></i></span>已倾心</li>
                    <li v-else @click="getFollow(item)"><span><i class="icon1"></i></span>倾心</li>
                    <li class="last" @click="goIm(item.id)"><span><i class="icon2"></i></span>嘿,你好</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="itemView">
      <div class="item" v-for="item in dataItem">
        <div class="itemTop">
          <img @click="goRouter(item.id)" v-if="item.square_avatar!=''" :src="item.square_avatar">
          <img @click="goRouter(item.id)" v-else :src="$store.state.defLogoBg">
          <p>
            <span v-if="item.user_follow!=null" class="left on" @click="delFollow(item)"><i class="icon1"></i>已倾心</span>
            <span v-if="item.user_follow==null" class="left" @click="getFollow(item)"><i class="icon1"></i>倾心</span>
            <span @click="goIm(item.id)"><i class="icon2"></i>嘿,你好</span>
          </p>
        </div>
        <div class="itemInfo">
          <span v-if="item.live_province!=null" class="add"><i></i>{{item.live_province.name}}</span>
          <p class="name">{{item.nickname}}<i></i><span>在线</span></p>
          <p class="tip">{{item.height}}cm | {{item.weight}}kg | {{item.constellation|dayB}}座</p>
          <div class="txt">
            {{item.self_introduce|txtSplit_50}}
          </div>
        </div>
      </div>

      <div v-if="loadStatic" class="loadingItem"><span></span></div>
      <div v-else class="notMore">---- 这是我们的底线 ----</div>

    </div>
  </section>
</template>
<script>
import { Get, Post, Delete } from '@/config/api.js'
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';

export default {
  name: 'Home',
  data() {
    return {
      bannerList: [],
      dataList: [], //滚动数据
      dataItem: [], //推荐数据
      swiperItemIndex: 1,
      loadStatic: true, //加载状态
      onPage: 1, //当前页面
      allDataPage: '', //总页数

    }
  },
  mounted() {
    if (this.vLogin()) {
      this.getMe()
    } else {
      this.getBanner()
      this.getData(1)
      this.getSet()
    }
    this.getRadio()
    var wh = $(window).height()
    $('.index').css('min-height', wh)

  },
  methods: {
    //获取mp信息
    async getRadio(id) {
      await Get('/radio', this.$store.state.token).then((res) => {
        this.$store.dispatch("mpData", res.data)
      })
    },
    startSwiper() {
      var swiper = new Swiper('.swiper-container-n', {
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 'auto',
        coverflowEffect: {
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows: true,
        }
      });
    },
    //去个人首页
    async goRouter(id) {
      this.$router.push({ path: '/aboutShow', query: { uid: id } })
      let data = {
        "visitor_user_id": id
      }
      await Post('/user/visitor', this.$store.state.token, data)
    },
    //获取用户信息
    async getMe() {
      await Get('/user/me', this.$store.state.token).then((res) => {
        //判断用户对像性别
        let gender = 2
        if (res.data.gender == 0) {
          this.$router.push({ path: '/choice' })
        } else if (res.data.gender == 1) {
          gender = 2
        } else {
          gender = 1
        }
        let data = {
          nickname: res.data.nickname,
          avatar: res.data.avatar,
          square_avatar: res.data.square_avatar,
          uid: res.data.id,
          password: res.data.im_password,
          mb_count: res.data.mb_count,
          wallet_balance: res.data.wallet_balance,
          gender: gender,
        }
        this.$store.dispatch("uid", data)

      }).then(() => {
        this.getBanner()
        this.getData(1)
        this.getSet()
      })
    },
    //去聊天
    goIm(val) {
      if (this.vLogin()) {
        this.$router.push({ path: '/webim1', query: { uid: val } })
      } else {
        this.$router.push({ path: '/login' })
      }

    },

    //滚动信息
    async getData() {
      this.$store.dispatch("loading", true)
      let sql //请求信息
      if (this.vLogin()) {
        sql = '/user?_per_page=8&gender=' + this.$store.state.gender + '&_include=user_photo,user_follow,live_province,live_city&_sort=-charm'
      } else {
        sql = '/user?_per_page=8&gender=' + this.$store.state.gender + '&_include=user_photo,live_province,live_city&_sort=-charm'
      }
      await Get(sql, this.$store.state.token).then((res) => {
        this.dataList = res.data
      }).then(() => {
        this.startSwiper()
        this.getDataA(1)
      })
    },
    //列表信息
    async getDataA(val) {
      let sql //请求信息
      if (this.vLogin()) {
        sql = '/user?_per_page=20&gender=' + this.$store.state.gender + '&_sort=-charm&_include=user_follow,live_province,live_city&page=' + val
      } else {
        sql = '/user?_per_page=20&gender=' + this.$store.state.gender + '&_sort=-charm&_include=live_province,live_city&page=' + val
      }
      await Get(sql, this.$store.state.token).then((res) => {
        this.dataItem.push(...res.data)
        this.allDataPage = res.meta.pagination.total_pages
      })

      this.$store.dispatch("loading", false);
    },
    //获取banner图片
    async getBanner() {
      await Get('/ad', this.$store.state.token).then((res) => {
        this.bannerList = res.data
      }).then(() => {
        let swiperB = new Swiper('#swiper', {
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          autoplay: 2000
        });
      })
    },
    //关注其他用户
    async getFollow(val) {
      if (this.vLogin()) {
        let data = {
          follow_user_id: val.id
        }
        let reg = await Post('/user/follow', this.$store.state.token, data).then((res) => {
          val.user_follow = '已倾心'
          let data = {
            static: true,
            txt: {
              type: 2,
              message: "倾心成功!"
            }
          }
          this.$store.dispatch("alert", data)
          setTimeout(() => {
            this.$store.dispatch("alertClose")
          }, 1000)
        })
      } else {
        this.$router.push({ path: '/login' })
      }

    },
    //取消关注其他用户
    async delFollow(val) {
      await Delete('/user/follow/' + val.id, this.$store.state.token).then((res) => {
        val.user_follow = null
        let data = {
          static: true,
          txt: {
            type: 2,
            message: "取消倾心成功!"
          }
        }
        this.$store.dispatch("alert", data)
        setTimeout(() => {
          this.$store.dispatch("alertClose")
        }, 1000)
      })
    },

    //下拉加载更多
    getSet() {
      let that = this
      $(window).scroll(function() {
        var h = $(document.body).height(); //网页文档的高度 
        var c = $(document).scrollTop(); //滚动条距离网页顶部的高度 
        var wh = $(window).height(); //页面可视化区域高度
        if (Math.ceil(wh + c) >= h) {
          if (that.onPage < that.allDataPage) {
            that.onPage++
              that.getDataA(that.onPage)
          } else {
            that.loadStatic = false
          }
        }
      })
    },
    shopSet() {
      $(window).unbind('scroll');
    }

  },
  beforeDestroy() {
    this.shopSet()
  }
}

</script>
